<template>
  <div class="login-container">
    <!-- 背景图片 -->
    <div class="background-image"></div>
    <div class="login-box">
      <!-- 标题 -->
      <h1 class="login-title">用户登录与注册</h1>
      <!-- 插入图片 -->
      <img src="../../assets/vue.svg" alt="Logo" class="login-logo">
      <n-form ref="formRef" :model="modelRef" :rules="rules">
        <n-form-item path="username" label="账号">
          <n-input v-model:value="modelRef.username" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            v-model:value="modelRef.password"
            type="password"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item path="repassword" label="确认密码" v-if="isreset">
          <n-input
            v-model:value="modelRef.repassword"
            type="password"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-row :gutter="[0, 24]" class="button-row">
          <n-col :span="24">
            <div class="button-group">
              <n-button
                type="primary"
                @click="handleReset"
              >
                注册
              </n-button>
              <n-button
                type="primary"
                @click="handleLogin"
              >
                登录
              </n-button>
            </div>
          </n-col>
        </n-row>
      </n-form>
    </div>
  </div>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { ref } from "vue";
import request from '../../utils/request.js'
import { useRouter } from "vue-router";
import { useAccount } from "../../store/account.js";
const route = useRouter()
const formRef = ref(null); //获取表单对象
const message = useMessage();
const isreset = ref(false)
const modelRef = ref({  //提取表单数据
  username: "杨敏",
  password: "111",
  repassword: null
});
//表单验证规则
const rules = {
  username: [
    {
      required: true,
      message: "请输入账号"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ],
  repassword: [
    {
      required: true,
      message: "请再次输入密码"
    },
    {
      validator: (rule, value) => value === modelRef.value.password,
      message: "两次输入的密码不一致"
    }
  ]
};

const boot = () => {
  console.log("boot");
  modelRef.value = {
    username: null,
    password: null,
    repassword: null
  }
}

// 注册
function handleReset(e) {
  console.log(isreset.value);
  if(isreset.value) {
    e.preventDefault();
    formRef.value?.validate(async (errors) => {
      if (!errors && modelRef.value.password === modelRef.value.repassword) {
        let res = await request.post('/users', {
          "username": modelRef.value.username,
          "password": modelRef.value.password
        })
        console.log(res);
        let { code, msg } = res.data
        if (code === 1) {
          message.success(msg)
          isreset.value = false
          boot()
          // // 跳转到首页
          // route.push('/')
        } else {
          message.error(msg)
        }
      } else if(modelRef.value.password != modelRef.value.repassword) {
        message.error("密码不一致，请重新输入")
      }else {
        console.log(errors);
        message.error("验证失败");
      }
    });
  }else{
    isreset.value = true
  }
}

const account = useAccount()
//表单提交按钮
function handleLogin(e) {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      await account.loginAccount(modelRef.value) // 触发状态机方法
    } else {
      console.log(errors);
      message.error("验证失败");
    }
  });
}

</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1542435503-956c469947f6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  z-index: -1;
}

.login-box {
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.login-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.login-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.n-button {
  flex: 1;
  margin: 0 5px;
}
</style>